<template>
	<view class="container" :style="{backgroundColor:pageinfo.bgcolor}">
		
			<!-- #ifdef MP-WEIXIN  -->
			<!-- <official-account></official-account> -->
			<!-- #endif -->
        <block v-if="xixie && xdata && xdata.xixie_mendian">
            <dp-xixie-mendian :mendian_data='xdata.mendian_data'  @changePopupAddress='changePopupAddress'></dp-xixie-mendian>
        </block>
		<block v-if="platform=='wx' && homeNavigationCustom == 2">
			<view class="navigation"
				:style="{height:(44+statusBarHeight)+'px','background':navigationBarBackgroundColor}">
				<view :style="{height:statusBarHeight+'px'}"></view>
				<view class='navcontent'>
					<view class="topinfo">
						<image class="topinfoicon" :src="sysset.logo" />
						<view class="topinfotxt" :style="{color:navigationBarTextStyle}">{{sysset.name}}</view>
					</view>
					
				</view>
			</view>
			<view style="width:100%;" :style="{height:(44+statusBarHeight)+'px'}"></view>
		</block>

		
		
	
        
        <view class="cardBox">
        	<view class="card" v-for="(store,index) in storeList" :key="index">
        		<image :src="store.pic" class="store">
        		<text class="title">{{store.name}}</text>
        		<view class="btnGroup">
        			<view class="btn btn1" @click="callPhone(store.tel)"><image src="https://lt.caomei.zone/xcxstatic/static/img/phone.png" class="icon">一键拨号</view>
        			<view class="btn btn2" @click="openLocation(store.latitude,store.longitude)"><image src="https://lt.caomei.zone/xcxstatic/static/img/position.png" class="icon">一键导航</view>
        		</view>
        	</view>
        </view>
		<view v-if="copyright!=''" class="copyright">{{copyright}}</view>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
	
		<popmsg ref="popmsg"></popmsg>
		
		
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				storeList:[],
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				pre_url: app.globalData.pre_url,
				platform: app.globalData.platform,
				homeNavigationCustom: app.globalData.homeNavigationCustom,
				navigationBarBackgroundColor: app.globalData.navigationBarBackgroundColor,
				navigationBarTextStyle: app.globalData.navigationBarTextStyle,

				id: 0,
				pageinfo: [],
				pagecontent: [],
				sysset: {},
				title: "",
				oglist: [],
				guanggaopic: "",
				guanggaourl: "",
				copyright: '',
				latitude: '',
				longitude: '',
				area:'',
				showarea:'',//城市
				statusBarHeight: 20,
				screenWidth: 375,
				business: [],
                
                xixie:false,
                xdata:'',
                display_buy:'',
                cartnum:0,
                cartprice:0,
                code:''
                
			}
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			var sysinfo = uni.getSystemInfoSync();

			this.statusBarHeight = sysinfo.statusBarHeight;
			this.screenWidth = sysinfo.screenWidth;
			
			
			var cachearea = app.getCache('user_current_area');
			var cachelongitude = app.getCache('user_current_longitude');
			var cachelatitude = app.getCache('user_current_latitude');
			
			
			
			
			if(cachearea || cachearea!=1){
				this.area = cachearea
				this.latitude = cachelatitude
				this.longitude = cachelongitude
			}
			this.getdata();

		},
		onPullDownRefresh: function(e) {
			this.getdata();
		},
		onPageScroll: function (e) {
			uni.$emit('onPageScroll',e);
		},
		methods: {
			openLocation(latitude,longitude)
			{ console.log('dizhi',latitude)
				
                uni.openLocation({
                    latitude: Number(latitude),
                    longitude: Number(longitude)
                });
			},
			callPhone(tel)
			{
				
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			getdata: function() {
				var that = this;
				var opt = this.opt
				var id = 0;
				if (opt.select_bid) {
					var select_bid = opt.select_bid;
					app.setCache('select_bid', select_bid);
				} else {
					var select_bid = app.getCache('select_bid');
				}

				if (opt && opt.id) {
					id = opt.id;
				}
				that.loading = true;
				
				uni.getLocation({
			    type: 'wgs84',
				geocode:false,//设置该参数为true可直接获取经纬度及城市信息
			    success: function (res) {
					console.log("定位")
					console.log(res)
					//that.addrDel = res;
					
					var longitude = res.longitude;
					var latitude = res.latitude;
					app.get('ApiAddress/getAreaByLocation',{longitude:longitude,latitude:latitude},function(data){
						console.log('---location_area---')
						console.log(data)
						console.log(data.city)
						
					
				
						
							that.showarea = data.city;
							app.setCache('user_current_city',that.showarea);
						
						console.log(that.showarea)
						
						});
					
			    },
				fail: function (res) {
					console.log("定位失败")
					console.log(res)
					uni.showToast({
					    title: '获取地址失败，将导致部分功能不可用',
						icon:'none'
					});
				}
			});
				var showarea1 = app.getCache('user_current_city');
				console.log("请求城市")
					console.log(showarea1)
				
				app.get('ApiIndex/index', {
					id: id,
					latitude: that.latitude,
					longitude: that.longitude,
					area:showarea1,
					select_bid: select_bid,
					pid: app.globalData.pid
				}, function(data) {
					
					that.loading = false;
					if (data.status == 2) {
						//付费查看
						app.goto('/pages/pay/pay?fromPage=index&id=' + data.payorderid + '&pageid=' + that.id,
							'redirect');
						return;
					}
					that.storeList=data.mendiancontent;
					if (data.status == 1) {
						
						var pagecontent = data.pagecontent;
						that.title = data.pageinfo.title;
						if(data.oglist)
							that.oglist = data.oglist;
						that.guanggaopic = data.guanggaopic;
						that.guanggaourl = data.guanggaourl;
						that.pageinfo = data.pageinfo;
						that.pagecontent = data.pagecontent;
						that.copyright = data.copyright;
						that.sysset = data.sysset;
						if (data.sysset.mode == 1 && data.business) {
							that.business = data.business;
							if (select_bid == '')
								app.setCache('select_bid', data.business.id);
						}
						uni.setNavigationBarTitle({
			 			title: data.pageinfo.title
						});
						that.loaded();
						if (that.latitude == '' && that.longitude == '' && data.needlocation) {
							app.getLocation(function(res) {
								console.log("地理")
								console.log(res)
								that.latitude = res.latitude;
								that.longitude = res.longitude;
								that.getdata();
							});
						}
                        if(data.xixie){
                            wx.login({
                                success: function(res){
                                    that.code = res.code
                                }
                            })
                            that.xixie    = data.xixie;
                            var xdata     = data.xdata;
                            that.xdata    = xdata;
                            
                            that.display_buy= xdata.display_buy?xdata.display_buy:false;
                            that.cartnum    = xdata.cartnum?xdata.cartnum:0;
                            that.cartprice  = xdata.cartprice?xdata.cartprice:0;
                            if (xdata.cart_data) {
                                setTimeout(function(){
                                    that.xcart_data = xdata.cart_data;
                                },200)
                            }
                            if (xdata.popup_address) {
                                setTimeout(function(){
                                    that.popup_address = data.popup_address;
                                },200)
                            }
                        }
			 	} else {
						if (data.msg) {
							app.alert(data.msg, function() {
								if (data.url) app.goto(data.url);
							});
						} else if (data.url) {
							app.goto(data.url);
						} else {
							app.alert('您无查看权限');
						}
					}
				});
			},
			showsubqrcode: function() {
				this.$refs.qrcodeDialog.open();
			},
			closesubqrcode: function() {
				this.$refs.qrcodeDialog.close();
			},
            changePopupAddress:function(status){
                this.xdata.popup_address = status;
            },
            setMendianData:function(data){
                this.mendian_data = data;
            }
	
	}
}
</script>
<style>
	.topR {
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		color: #666;
	}

	.topR .btn-text {
		margin: 0 10rpx;
		color: #333;
	}

	.follow_topbar {
		height: 88rpx;
		width: 100%;
		max-width: 640px;
		background: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		z-index: 13;
	}

	.follow_topbar .headimg {
		height: 64rpx;
		width: 64rpx;
		margin: 6px;
		float: left;
	}

	.follow_topbar .headimg image {
		height: 64rpx;
		width: 64rpx;
	}

	.follow_topbar .info {
		height: 56rpx;
		padding: 16rpx 0;
	}

	.follow_topbar .info .i {
		height: 28rpx;
		line-height: 28rpx;
		color: #ccc;
		font-size: 24rpx;
	}

	.follow_topbar .info {
		height: 80rpx;
		float: left;
	}

	.follow_topbar .sub {
		height: 48rpx;
		width: auto;
		background: #FC4343;
		padding: 0 20rpx;
		margin: 20rpx 16rpx 20rpx 0;
		float: right;
		font-size: 24rpx;
		color: #fff;
		line-height: 52rpx;
		border-radius: 6rpx;
	}

	.qrcodebox {
		background: #fff;
		padding: 50rpx;
		position: relative;
		border-radius: 20rpx
	}

	.qrcodebox .img {
		width: 400rpx;
		height: 400rpx
	}

	.qrcodebox .txt {
		color: #666;
		margin-top: 20rpx;
		font-size: 26rpx;
		text-align: center
	}

	.qrcodebox .close {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		margin-left: -25rpx;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 50%;
		padding: 8rpx
	}

	.bobaobox {
		position: fixed;
		top: calc(var(--window-top) + 180rpx);
		left: 20rpx;
		z-index: 10;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 30rpx;
		color: #fff;
		padding: 0 10rpx
	}
	.bobaobox_bottom {
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 150rpx);
		left: 0;
		right: 0;
		width:470rpx;
		margin:0 auto;
		z-index: 10;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 30rpx;
		color: #fff;
		padding: 0 10rpx
	}
	@supports (bottom: env(safe-area-inset-bottom)){
		.bobaobox_bottom {
			position: fixed;
			bottom: calc(env(safe-area-inset-bottom) + 150rpx);
			left: 0;
			right: 0;
			width:470rpx;
			margin:0 auto;
			z-index: 10;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 30rpx;
			color: #fff;
			padding: 0 10rpx
		}
	}

	.navigation {
		width: 100%;
		height: 64px;
		background: #fff;
		position: fixed;
		z-index: 99
	}

	.navcontent {
		display: flex;
		align-items: center;
		height: 44px;
		padding-left: 10px
	}

	.navcontent .topinfo {
		display: flex;
		align-items: center;
	}

	.navcontent .topinfoicon {
		width: 17px;
		height: 17px;
		border-radius: 4px
	}

	.navcontent .topinfotxt {
		margin-left: 6px;
		font-size: 14px;
		font-weight: 600;
		width: 70px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.navcontent .topsearch {
		width: 150px;
		height: 32px;
		background: #f2f2f2;
		border-radius: 16px;
		color: #232323;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px
	}

	.navcontent .topsearch image {
		width: 14px;
		height: 15px;
		margin-right: 6px
	}

	.limitText {
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		color: #666;
	}

	.agent-card {
		height: auto;
		position: relative;
		background-color: #fff;
		margin: 0 20rpx 10rpx;
		font-size: 24rpx;
		border-radius: 0 10rpx 10rpx 10rpx;
		overflow: hidden;
		box-shadow: 0 0 8rpx 0px rgb(0 0 0 / 30%);
	}

	.agent-card .row1 {
		padding: 20rpx 10rpx 20rpx 20rpx;
	}

	.agent-card .logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.agent-card .text {
		flex: 1;
		margin-left: 20rpx;
		color: #666;
		line-height: 180%;
	}

	.agent-card .title {
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.agent-card .right {
		height: 120rpx;
	}

	.agent-card .btn {
		position: absolute;
		right: -100rpx;
		padding: 0 14rpx;
		top: 0;
		border: 1px solid #B6C26E;
		border-radius: 10rpx;
		color: #B6C26E;
	}

	.agent-card .img {
		margin-right: 6rpx;
		width: 30rpx;
		height: 30rpx
	}

	.agent-card .img2 {
		width: 32rpx;
		height: 32rpx
	}

	.grey-text {
		color: #999;
		font-weight: normal;
	}

	.agent-card-b view {
		line-height: 72rpx;
		font-size: 28rpx;
		color: #444;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.agent-card-b view:first-child::after {
		content: '';
		width: 1px;
		height: 28rpx;
		border-right: 1px solid #444;
		position: absolute;
		right: 0;
	}
	.visitBox
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		justify-content: flex-start;
		font-size: 23rpx;
		width: 100vw;
		color:RGBA(0,0,0,0.6);
		padding: 15rpx 20rpx;
	
	}
	.number
	{
		font-size: 24rpx;
		font-weight: 700;
		margin-right: 10rpx;
		margin-left: 30rpx;
	}
	.avatarList
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0rpx 10rpx;
	}
	.avatar
	{
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		margin-left: 12rpx;
	}
	.cardBox
	{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100vw;
		margin-bottom: 20rpx;
	}
	.card
	{
		padding-top: 30rpx;
		height: 30vh;
		width: 97vw;
		margin-top: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		border-top: 1px solid rgba(255, 255, 255, 0.8);
		border-left: 1px solid rgba(255, 255, 255, 0.8);
		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	}
	.store
	{
		border-radius: 5rpx;
		height: 240rpx;
		width: 80%;
	}
	.title
	{
		margin: 20rpx 0rpx;
		font-weight: bold;
	}
	.btnGroup
	{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border: 1rpx solid RGBA(0,0,0,0.05);
		background-color: #FFFFFF;
		padding: 30rpx 0rpx;
		
	}
	.btn
	{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		font-size: 24rpx;
		height: 30rpx;
		font-weight: 600;
	}
	.btn
	{
		border-right: 1rpx solid RGBA(0,0,0,0.1);
	}
	.icon
	{
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}
</style>
